<template>
  <div class="container">
    <a-card style="height: calc(100vh - 65px);width: 220px;overflow:hidden auto;padding: 0;">
      <a-menu v-model:selectedKeys="selectedKeys" style="width: 220px;">
        <a-menu-item v-for="item in dataList" :key="item.key" style="font-size: 16px;"
          @click="getType(item.name, item.key)">
          <span>{{ item.name }}</span>
        </a-menu-item>
      </a-menu>
    </a-card>
    <a-card style="flex: 1;float: right;padding: 0 20px;height: calc(100vh - 65px);padding: 20px;">
      <dataType :type="Type"></dataType>
    </a-card>
  </div>
</template>
<script>
export default {
  name: "datas",
};
</script>
<script setup>
import dataList from './datas.js'
import { ref, watch, defineAsyncComponent, inject } from "vue";
import dataType from '@views/datas/dataType.vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const selectedKeys = ref([router.currentRoute.value.query.key][0] === undefined ? ['1'] : [router.currentRoute.value.query.key])
const Type = ref('province')

function updateQueryStringParameter(uri, key, value) {
  if (!value) { return uri }
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}
function getType(name, key) {
  Type.value = name
  selectedKeys.value = [key]
  let newurl = updateQueryStringParameter(window.location.href, 'key', selectedKeys.value,);
  window.history.replaceState({
    path: newurl
  }, '', newurl);
}

</script>

<style lang="less" scoped>
.container {
  padding: 20px;
  height: calc(100vh - 65px);
  display: flex;
  overflow: hidden;
}

::v-deep .ant-card-body {
  padding: 20px 0;
}

::v-deep .ant-card-body{
padding: 0;
}
</style>
